<template>
  <section>
    <div class="wrapper" id="result">
      <div v-for="(result, index1) in results" :key="index1">
        <div class="result" v-if="result.type === 1">
          <p>{{result.questionName}}</p>
          <div v-for="(option, index2) in result.myOptionList" :key="index2"
          class="options">
            <span>{{option.num}}%</span>
            <span>{{option.optionName}}</span>
            <div class="cover" :style="{width: option.num + '%'}"></div>
          </div>
        </div>
        <div class="result" v-if="result.type === 2">
          <p>{{result.questionName}}</p>
          <div v-for="(option, index2) in result.myOptionList" :key="index2"
          class="options">
            <span>{{option.num}}%</span>
            <span>{{option.optionName}}</span>
            <div class="cover" :style="{width: option.num + '%'}"></div>
          </div>
        </div>
        <div class="result" v-if="result.type === 3">
          <p>{{result.questionName}}</p>
          <div class="content">
            <!-- <div v-for="(value, index) in result.options" :key="index"
            :style="{width: `${50 / result.options.length}%`, height: `${value.per}%`}"
            class="per">
              <span>{{value.per}}%</span>
            </div> -->
          </div>
          <div class="line"></div>
          <!-- <div class="s-content">
            <div v-for="i in result.options.length" :key="i" class="split">
              <span>{{i}}</span>
            </div>
          </div> -->
        </div>
        <div class="result" v-if="result.type === 4">
          <p>{{result.questionName}}</p>
          <div class="content">
            <!-- <div v-for="(value, index) in result.options" :key="index"
            :style="{width: `${50 / result.options.length}%`, height: `${value.per}%`}"
            class="per">
              <span>{{value.per}}%</span>
            </div> -->
          </div>
          <div class="line"></div>
          <div class="s-content">
            <!-- <div v-for="i in result.options.length" :key="i" class="split">
              <span>{{i}}</span>
            </div> -->
          </div>
        </div>
        <div class="result" v-if="result.type === 5">
          <p>{{result.questionName}}</p>
          <div v-for="(option, index2) in result.sortOptionList" :key="index2"
          class="options">
            <span>{{option.num}}%</span>
            <span>{{option.optionName}}</span>
            <!-- <div class="cover" :style="{width: option.per + '%'}"></div> -->
          </div>
        </div>
        <div class="result" v-if="result.type === 6">
          <p>{{result.questionName}}</p>
          <div v-for="(option, index2) in result.myOptionList" :key="index2"
          class="options">
            <div class="img" :style="{backgroundImage: `url(${option.pic})`}"></div>
            <div class="percent">
              <!-- <span>{{option.per}}%</span>
              <span>{{option.content}}</span> -->
              <!-- <div class="cover" :style="{width: option.per + '%'}"></div> -->
            </div>
          </div>
        </div>
        <div class="result" v-if="result.type === 7">
          <p>{{result.questionName}}</p>
          <li v-for="(option, index2) in result.contentList" :key="index2">
            {{index2 + 1}}.{{option}}
          </li>
        </div>
      </div>
    </div>
    <div class="pagination">
      <li v-for="i in resultsLength + 1" :key="i"
      :class="[i === resultNow + 1 ? 'active' : '']"></li>
    </div>
    <footer>
      <svg class="icon" aria-hidden="true" @click="swipeRight">
        <use xlink:href="#icon-fanhui"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="backHome">
        <use xlink:href="#icon-shouye-copy"></use>
      </svg>
      <svg class="icon" aria-hidden="true" @click="swipeLeft">
        <use xlink:href="#icon-qianjin"></use>
      </svg>
    </footer>
  </section>
</template>

<script>
import {findMySurvey} from '@/api/survey'
import {check} from '@/api/common'

export default {
  name: 'result',
  data () {
    return {
      results: [],
      resultNow: 0                    // 当前显示的结果页
    }
  },
  created () {
    this.initInfo()
  },
  computed: {
    resultsLength () {
      return this.results.length - 1
    }                                 // 结果数组长度
  },
  methods: {
    initInfo () {
      let id = this.$route.params.id
      let formData = {
        data: {
          uid: localStorage.uid,
          surveyId: id
        },
        token: localStorage.token
      }
      findMySurvey(JSON.stringify(formData)).then(
        (data) => {
          var result = check(data)
          if (typeof (result) === 'boolean') {
            this.results = data.data.data.questionRespVoList.sort((obj1, obj2) => {
              return obj1.sort - obj2.sort
            })
          }
        }
      )
    },
    swipeLeft () {
      if (this.resultNow < this.resultsLength) {
        this.resultNow++
        this._translate()
      }
    },                                // 底部右边点击事件(下一个结果)
    swipeRight () {
      if (this.resultNow > 0) {
        this.resultNow--
        this._translate()
      }
    },                                // 底部左边点击事件(上一个结果)
    _translate () {
      let distance = -100 * this.resultNow
      document.getElementById('result').style.transform = `translateX(${distance}vw)`
    },                                // 滑动效果
    backHome () {
      this.$router.go(-1)
    }                                 // 底部中间返回首页事件
  }
}
</script>

<style lang="scss" scoped>
section {
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  overflow: hidden;
}
.wrapper {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s;
}
.result {
  flex: none;
  width: 100vw;
  height: 90vh;
  overflow-y: auto;
  li {
    list-style: none;
    font-size: 40px;
    padding-left: 50px;
    margin: 10px 0;
  }
  p {
    text-align: center;
    font-size: 40px;
    margin-top: 100px;
  }
  .options {
    margin: 40px auto;
    height: 180px;
    width: 550px;
    background-color: #8e8db5;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-size: 40px;
    span {
      z-index: 99;
      margin-right: 30%;
    }
    .img {
      width: 180px;
      height: 100%;
      background-color: #fff;
      padding-right: 10px;
    }
    .percent {
      position: relative;
      width: 60%;
      height: 180px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .cover {
    position: absolute;
    height: 180px;
    top: 0;
    left: 0;
    background-color: #2e3192 ;
    transition: all 0.8s;
  }
}
.pagination {
  position: absolute;
  top: 30px;
  left: 0;
  display: flex;
  width: 100vw;
  align-items: center;
  justify-content: center;
  li {
    list-style: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #aaa;
    margin-right: 20px;
    &.active {
      background-color: #555;
    }
  }
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100vw;
  background-color: #333;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon {
  width: 60px;
  height: 60px;
  color: #fff;
  margin: 0 30px;
}
.content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  height: 500px;
  justify-content: space-between;
  margin: 20px auto;
  margin-top: 50px;
  align-items: flex-end;
  .per {
    position: relative;
    background-color: #2e3192;
    transition: all 1s;
    span {
      position: absolute;
      transform: translateY(-100%);
      font-size: 34px;
      color: #2e3192;
    }
  }
}
.s-content {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 580px;
  justify-content: space-between;
  margin: 0 auto;
  .split {
    position: relative;
    height: 20px;
    width: 2px;
    background-color: #b7b7b7;
    margin: 20px 10px;
    span {
      position: absolute;
      transform: translate3d(-50%, 100%, 0);
      color: #999;
      font-size: 24px;
    }
  }
}
.line {
  width: 580px;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  margin: 0 auto;
}
</style>
